<style include="cr-shared-style settings-shared">
  :host {
    --privacy-guide-footer-vertical-padding: 16px;
    --privacy-guide-footer-total-height: calc(var(--cr-button-height) +
        2 * var(--privacy-guide-footer-vertical-padding));
  }

  .footer {
    align-items: center;
    bottom: 0;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    padding: var(--privacy-guide-footer-vertical-padding) 24px;
    position: absolute;
    width: 100%;
  }

  .managed-fragment {
    /* Override cr-view-manager's default styling for view. */
    bottom: initial;
    grid-column-start: 1;
    grid-row-start: 1;
    left: initial;
    position: unset;
    right: initial;
    top: initial;
  }

  #viewManager {
    position: relative;
  }

  #viewManager > :not(.active) {
    /* Restore cr-view-manager's absolute positioning for non-active elements,
       so they overlap the active element. */
    left: 0;
    position: absolute;
    top: 0;
  }

  .visibility-hidden {
    visibility: hidden;
  }

  .privacy-review-card {
    background-color: var(--cr-card-background-color);
    border-radius: var(--cr-card-border-radius);
    box-shadow: var(--cr-card-shadow);
    box-sizing: border-box;
    display: flex;
    flex-flow: column;
    min-height: 432px;
    padding-bottom: var(--privacy-guide-footer-total-height);
    position: relative;
  }
</style>
<div class="privacy-review-card">
  <cr-view-manager id="viewManager" on-view-enter-start="onViewEnterStart_">
    <privacy-review-welcome-fragment id="[[privacyReviewStepEnum_.WELCOME]]"
        class="managed-fragment" on-start-button-click="onNextButtonClick_"
        slot="view">
    </privacy-review-welcome-fragment>
    <privacy-review-msbb-fragment id="[[privacyReviewStepEnum_.MSBB]]"
        class="managed-fragment" prefs="{{prefs}}" slot="view">
    </privacy-review-msbb-fragment>
    <privacy-review-clear-on-exit-fragment
        id="[[privacyReviewStepEnum_.CLEAR_ON_EXIT]]" class="managed-fragment"
        prefs="{{prefs}}" slot="view">
    </privacy-review-clear-on-exit-fragment>
    <privacy-review-history-sync-fragment
        id="[[privacyReviewStepEnum_.HISTORY_SYNC]]" class="managed-fragment"
        prefs="{{prefs}}" slot="view">
    </privacy-review-history-sync-fragment>
    <privacy-review-safe-browsing-fragment
        id="[[privacyReviewStepEnum_.SAFE_BROWSING]]" class="managed-fragment"
        prefs="{{prefs}}" slot="view">
    </privacy-review-safe-browsing-fragment>
    <privacy-review-cookies-fragment id="[[privacyReviewStepEnum_.COOKIES]]"
        class="managed-fragment" prefs="{{prefs}}" slot="view">
    </privacy-review-cookies-fragment>
    <privacy-review-completion-fragment
        id="[[privacyReviewStepEnum_.COMPLETION]]" class="managed-fragment"
        on-leave-button-click="onNextButtonClick_"
        on-back-button-click="onBackButtonClick_" slot="view">
    </privacy-review-completion-fragment>
  </cr-view-manager>
  <template is="dom-if" if="[[showAnySettingFragment_(privacyReviewStep_)]]">
    <div id="settingFooter" class="footer hr">
      <cr-button id="backButton" role="button" on-click="onBackButtonClick_"
          class$="[[computeBackButtonClass_(privacyReviewStep_)]]">
        $i18n{privacyReviewBackButton}
      </cr-button>
      <step-indicator model="[[stepIndicatorModel_]]"></step-indicator>
      <cr-button class="action-button" id="nextButton" role="button"
          tabindex="0" on-click="onNextButtonClick_">
        $i18n{privacyReviewNextButton}
      </cr-button>
    </div>
  </template>
</div>
